<template>
   <table>
      <thead>
         <tr>
            <td>工号</td>
            <td>姓名</td>
            <td>薪水</td>
            <td>头像</td>
         </tr>
      </thead>
      <tbody>
         <tr v-for="(item,index) in items" :key="index">
            <td>{{item.id}}</td>
            <td>{{item.name}}</td>
            <td>{{item.salary}}</td>
            <td>
                <!-- 
                    第1步：在子组件的<slot>开始标签部分使用v-bind属性绑定
                        v-bind:自定义名称="要传出去的值"
                 -->
                <slot v-bind:item="item.avatar">{{item.avatar}}</slot>
            </td>
         </tr>
      </tbody>
   </table>
</template>

<script>
export default {
    props:['items']
}
</script>

<style>
   table{
    border-collapse: collapse;
   }
   td{
    border: 1px solid #999;
    padding: 5px;
    text-align: center;
   }
</style>